<script>
	export default {
		data() {
			return {
				amount: 0,
				userInfo: {},
				logList:[],
				data:'',
				canUseRequestMerchantTransfer: false,

			}
		},
		onLoad(){
			this.getBalance();
			this.checkAPI();
			this.getLogList()
		},	
		methods: {
			async query_bill(item){
				var that = this
				const res = await this.http("get", "/api/tixian/query_bill",{out_trade_no:item.out_trade_no})
				console.log(res.data)
				if(res.data=='WAIT_USER_CONFIRM'){
					that.useRequestMerchantTransfer(item)
				}else if(res.data=='SUCCESS'){
					uni.showToast({
						title:'您已成功收款'
					})
				}else{
					uni.showToast({
						title:'转账已过期，请联系客服重新发起转账'
					})
				}
			},
			async getLogList(){
				const res = await this.http("get", "/api/tixian/bill")
				this.data = res.data
				this.logList = this.data.list
			},
			checkAPI() {
			  // 检查API是否可用
			  if (wx.canIUse('requestMerchantTransfer')) {
				this.canUseRequestMerchantTransfer = true;
				console.log('可以使用 requestMerchantTransfer');
			  } else {
				this.canUseRequestMerchantTransfer = false;
				console.log('无法使用 requestMerchantTransfer');
			  }
			},
			useRequestMerchantTransfer(item) {
				var that = this
			  if (this.canUseRequestMerchantTransfer) {
				// 调用API
				wx.requestMerchantTransfer({
					mchId: '1702478872',
					appId: 'wx10dbf84c62a916f2',
					package: item.package_info,
				  partner_trade_no: item.transfer_bill_no, // 商户订单号，32个字符内、可包含字母，确保在商户系统中的唯一性
				  amount: item.amount, // 转账金额，单位为“分”
				  desc: '提现转账', // 企业付款理由，必填
				  success(res) {
					uni.showToast({
						title:'收款成功'
					})
					that.shoukuan(item)
				  },
				  fail(err) {
					uni.showToast({
						title:'收款失败'
					})
					that.shoukuan2(item)
					
				  }
				});
			  } else {
				console.log('该API不可用');
			  }
			},
			async getBalance(){
				uni.showLoading({
					title: "加载中..."
				});
				const res = await this.http("get", "/api/user/user_info");
				uni.hideLoading();
				this.userInfo = res.data;
			},
			
			async shoukuan(item){
				const res = await this.http("get", "/api/tixian/shoukuan",{id:item.id});
				var that = this
				setTimeout(function(){
					that.getLogList();
				},2000)
			},
			async shoukuan2(item){
				const res = await this.http("get", "/api/tixian/shoukuan2",{id:item.id});
				var that = this
				setTimeout(function(){
					that.getLogList();
				},2000)
			},
			allWithdrawal(){
				this.amount = this.userInfo.amount;
			},
			async withdrawal(){
				if(this.amount == 0){
					this.toast("请输入提现金额");
					return;
				}
				if(this.amount > this.userInfo.amount){
					this.toast("提现金额不能大于余额");
					return;
				}
				if(this.amount < 1){
					this.toast("提现金额不能小于1");
					return;
				}
				uni.showLoading({
					title: "提交中..."
				});
				const res = await this.http("post", "/api/user/withdrawal", {
					amount: this.amount
				});
				uni.hideLoading();
				this.toast(res.message);
				setTimeout(function(){
					uni.redirectTo({
						url:'/pages/my/balance'
					})
				},2000)
				
			}
		}
	}
</script>


<template>
	<view class="my-content">
		<view class="recharge-top">
			<view class="recharge-text">
				<text>钱包余额</text>
				<text class="big">{{userInfo.amount}}</text>
			</view>
			<image src="../../static/my/bg3.png" mode="widthFix"></image>
		</view>
		<view class="form-item">
			<text>提现金额</text>
			<view class="flex-box">
				<input type="text" placeholder="请输入金额" v-model="amount">
				<text @click="allWithdrawal">全部提现</text>
			</view>
		</view>
		<view class="pay" @click="withdrawal">
			<image src="../../static/my/wx1.png" mode="widthFix"></image>
			<text>提现到微信零钱</text>
		</view>
		
		
		<view class="balance-item" v-for="item in logList" style="margin-top:50rpx ; position: relative;">
			<view class="balance-title">
				<text class="big" >提现收款
					<text style="color: red;" v-if="item.status!='已收款'">（{{item.status}}）</text>
					<text style="color: green;" v-if="item.status=='已收款'">（{{item.status}}）</text>
					
				</text>				
				<text>{{ item.create_at }}</text>
			</view>
			<text> 
				{{ Number(item.amount*0.01).toFixed(2) }}
			</text>
			
			<text v-if="item.state!='SUCCESS'" @click="query_bill(item)" style="position: absolute; top: 80rpx;left: 80%; color: red;">
				确认收款
			</text>
		</view>
		
	</view>
	
	
	
</template>



<style lang="less">
	.my-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		.recharge-top{
			width: 100%;
			padding: 20upx;
			box-sizing: border-box;
			position: relative;
			image{
				width: 100%;
				height: auto;
			}
			.recharge-text{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;
				z-index: 2;
				text{
					font-size: 46upx;
					color: #000;
					font-weight: bold;
				}
				.big{
					font-size: 90upx;
				}
			}
		}
		.form-item{
			width: 100%;
			border-radius: 16upx;
			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
			padding: 20upx;
			box-sizing: border-box;
			text{
				font-size: 36upx;
				color: #000;
				font-weight: bold;
			}
			input{
				width: 80%;
				font-size: 32upx;
			}
			.flex-box{
				display: flex;
				justify-content: space-between;
				margin-top: 10upx;
				text{
					font-size: 28upx;
					color: #3662EC;
					font-weight: normal;
				}
			}
		}
		.pay{
			width: 100%;
			border-radius: 8px;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid #26A743;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
			margin-top: 200upx;
			padding: 10upx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 80upx;
				height: auto;
				display: block;
				margin-right: 10upx;
			}
			text{
				color: #88C43E;
				font-size: 40upx;
			}
		}
	
		.balance-item{
			width: 100%;
			background-color: #fff;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
			border-radius: 16upx;
			margin-bottom: 20upx;
			padding: 20upx;
			box-sizing: border-box;
			.balance-title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20upx;
				.big{
					font-size: 36upx;
					color: #000;
					font-weight: bold;
				}
				text{
					color: #A6A6A6;
					font-size: 24upx;
				}
			}
			text{
				font-size: 32upx;
				color: #A6A6A6;
			}
		}
	
	}
</style>